<template>
  <div id="prizeList">
    <h1 class="con-right-title">
      奖品列表
    </h1>
    <!-- 顶部搜索 -->
    <div class="search-box">
      <el-form
        :inline="true"
        :model="searchParams"
        ref="ruleForm"
        class="demo-form-inline"
      >
        <el-form-item label="一级分类：" prop="classifyId">
          <el-select
            size="small"
            v-model="searchParams.classifyId"
            placeholder="请选择一级分类"
            @change="getLevel2List"
            clearable
          >
            <el-option
              v-for="item in classifyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类：" prop="secondaryClassifyId">
          <el-select
            size="small"
            v-model="searchParams.secondaryClassifyId"
            placeholder="请选择二级分类"
            clearable
          >
            <el-option
              v-for="item in secondaryClassifyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖品名称：" prop="prizeName">
          <el-input
            size="small"
            v-model="searchParams.prizeName"
            placeholder="请输入奖品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button type="success" icon="el-icon-search" @click="toSearch">
            查询
          </el-button>
          <el-button type="success" plain @click="resetForm('ruleForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button
        type="warning"
        icon="el-icon-plus"
        @click="addEditPrize('add')"
      >
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column
        label="一级分类"
        prop="classifyName"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="二级分类"
        prop="secondaryClassifyName"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="奖励图片" min-width="110" align="center">
        <template slot-scope="scope">
          <span>
            <listImgString
              v-if="scope.row.img"
              :imgInfo="scope.row.img"
            ></listImgString>
            <template v-else>-</template>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="奖品名称"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="exchangeAmount"
        label="兑换价（元）"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="奖品状态" min-width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status ? '正常' : '未启用' }}</span>
        </template></el-table-column
      >
      <el-table-column
        prop="createUserName"
        label="创建人"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" min-width="150">
        <template slot-scope="scope">
          <template>
            <el-button
              v-if="scope.row.status"
              type="text"
              @click="handlerPrize(scope.row, 'disable')"
            >
              禁用
            </el-button>
            <el-button
              v-else
              type="text"
              @click="handlerPrize(scope.row, 'enable')"
            >
              启用
            </el-button>
          </template>
          <template>
            <el-button type="text" @click="addEditPrize('edit', scope.row)">
              编辑
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增弹窗 -->
    <edit-dialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      :classifyList="classifyList"
      @searchList="searchList"
    />
  </div>
</template>

<script>
import editDialog from './editDialog'
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import {
  getPrizeList,
  getClassify,
  prizeDisable,
  prizeEnable
} from '@/api/partner/prizes'
export default {
  components: {
    editDialog,
    listImgString
  },
  data() {
    return {
      loading: true,
      classifyList: [],
      secondaryClassifyList: [],
      tableData: [],
      total: 0,
      searchParams: {
        classifyId: '',
        secondaryClassifyId: '',
        prizeName: '',
        pageNum: 1,
        pageSize: 10
      },
      editDialogData: {}
    }
  },
  mounted() {
    /* 获取一级分类 */
    getClassify({ id: 0 }, (res) => {
      this.classifyList = res.rows
    })
    this.searchList()
  },
  methods: {
    searchList() {
      this.loading = true
      getPrizeList(this.searchParams, (res) => {
        this.loading = false
        this.tableData = res.rows
        this.total = res.total
      })
    },
    /* 获取二级分类 */
    getLevel2List(id) {
      if (!id) return
      this.searchParams.secondaryClassifyId = ''
      getClassify({ id }, (res) => {
        this.secondaryClassifyList = res.rows
      })
    },
    /* 查询 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 重置 */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.secondaryClassifyList = []
    },
    /* 新增配置 */
    addEditPrize(type, row) {
      if (type === 'add') {
        this.editDialogData = { type, isShow: true }
      } else {
        this.editDialogData = { type, isShow: true, id: row.id }
      }
    },
    /* 启用禁用 */
    handlerPrize(row, state) {
      if (state === 'disable') {
        prizeDisable(row, () => {
          this.searchList()
          this.$message.success('禁用成功')
        })
      } else {
        prizeEnable(row, () => {
          this.searchList()
          this.$message.success('启用成功')
        })
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
